<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getActivityList4IndexApi } from "../../service/applyaudit/applyaudit";
const router = useRouter()
const breadcround = ref([
  { name: '首页', url: '/main/home' },
  { name: '活动回顾', url: '/main/activityreview' }
])
const timeLineList = ref([])
const timeLineActiveList = ref([])
let checkYear = ref(false)
let isAdd = ref(2)
const years = ref([])
const yearRef = ref()
const chooseYearRef = ref()
function yearClick(item, index) {
  let newEl = yearRef.value[index];
  console.log(years.value[index]);
  const newOffsetLeft = newEl.offsetLeft;
  const itemWidth = newEl.clientWidth
  const contentWidth = chooseYearRef.value.clientWidth
  const distance = newOffsetLeft + itemWidth * 0.5 - contentWidth * 0.5
  if (distance > 0) {
    chooseYearRef.value.style.transform = `translatex(-${distance}px)`
  } else {
    chooseYearRef.value.style.transform = `translatex(${Math.abs(distance)}px)`
  }
  if (years.value[index] == item) {
    isAdd.value = index
  }
  timeLineActiveList.value = timeLineList.value.filter(item =>
    item.timestamp == years.value[index]
  )
}
function getActivityList4Index() {
  getActivityList4IndexApi().then((resp) => {
    console.log(resp);
    if (resp.data.code === 0) {
      let activityList = resp.data.result;
      for (let activityListKey in activityList) {
        const activity = activityList[activityListKey];
        let timeLine = timeLineList.value.filter(item => item.timestamp == activity.activityBeginTime.split('-')[0]);
        if (timeLine.length > 0) {
          setTimeLineJson(timeLine[0], activity);
        } else {
          timeLine = {
            timestamp: activity.activityBeginTime.split('-')[0], timeItem: []
          }
          setTimeLineJson(timeLine, activity);
          timeLineList.value.push(timeLine);
          years.value.push(activity.activityBeginTime.split('-')[0]);
        }
      }
      timeLineActiveList.value = timeLineList.value;
    } else {

    }
  });
}
function setTimeLineJson(timeLine, activity) {
  if (timeLine.timeItem.length > 0) {
    timeLine.timeItem.push({
      id: activity.activityId
      , time: activity.activityBeginTime
      , title: activity.activityName
      , img: activity.coverImage
      , detailedContext: activity.activityBrief
      , detailedTitle: activity.activityName
    });
  } else {
    timeLine.timeItem = [];
    timeLine.timeItem.push({
      id: activity.activityId
      , time: activity.activityBeginTime
      , title: activity.activityName
      , img: activity.coverImage
      , detailedContext: activity.activityBrief
      , detailedTitle: activity.activityName
    });
  }
}
function detailClick(activityId) {
  router.push({ path: '/main/activitydetail', query: { activityId: activityId } })
}

onMounted(() => {
  getActivityList4Index();
});
</script>

<template>
  <div>
    <div class="backImg">
      <img src="@/assets/img/activityImg.png" alt="">
    </div>
    <div class="box">
      <bread class="bread" :breadcround="breadcround" />
      <div class="showdow">
        <div class="yearLeft"></div>

        <div class="chooseYear" ref="chooseYearRef">
          <template v-for="(item, index) in years" :key="item">
            <div class="year" :class="{ 'checkYear': index == isAdd }" @click="yearClick(item, index)" ref="yearRef">
              {{ item }}
            </div>
          </template>
        </div>
        <div class="yearright"></div>

      </div>

      <div class="times">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in timeLineActiveList" type='primary' :timestamp="item.timestamp"
            placement="top" ::key="item.id">
            <template v-for="(item1, index1) in item.timeItem" :key="item1.id">
              <div class="timeItem">
                <div class="time">{{ item1.time }}</div>
                <div class="title">{{ item1.title }}</div>
                <div class="img">
                  <img :src="item1.img" alt="">
                  <div class="detailedText">
                    <div class="title">{{ item1.detailedTitle }}</div>
                    <div style="width: 24px;height: 4px;background: #1891FF;margin: 15px 0;"></div>
                    <div class="context">{{ item1.detailedContext }}</div>
                    <div class="button">
                      <el-button type="primary" plain @click="detailClick(item1.id)">查看详细</el-button>

                    </div>
                  </div>
                </div>
              </div>

            </template>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.backImg {

  height: 280px;

  // background-color: red;
  img {
    width: 100%;
    height: 100%;
  }
}

.box {
  // padding: 0 7.8%;
  width: 1500px;
  margin: 0 auto;

  .bread {
    margin: 24px 0 54px;
  }

  .showdow {
    width: 1000px;
    height: 120px;
    margin: 0 auto;
    box-shadow: 0px 10px 15px -7px;
    overflow: hidden;
    position: relative;
  }

  .yearLeft {
    position: absolute;
    left: 0;
    width: 90px;
    height: 100%;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 1));
    // background: linear-gradient(to right, #000, green);
    box-shadow: 14px 0px 20px 0px #fff;
    z-index: 1;
  }

  .yearright {
    position: absolute;
    right: 0;
    top: 0;
    width: 120px;
    height: 100%;
    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 1));
    // background: linear-gradient(to left, red, rgba(255, 255, 255, 1));
    // background: linear-gradient(to left, #000, green);
    box-shadow: -14px 0px 20px 0px #fff;
  }

  .chooseYear {
    width: 1000px;
    height: 120px;
    background: #fff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    transition: transform 200ms ease;
    cursor: pointer;

    .year:last-child {
      margin-right: 0;
    }





    .year {
      margin-right: 120px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #787878;

    }

    .checkYear {
      font-size: 36px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #1891FF;
    }

    .seletYear {
      font-size: 36px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #1891FF;
    }
  }

  .times {
    margin-top: 60px;

    :deep(.el-timeline-item__timestamp) {
      width: 132px;
      height: 40px;
      // background: #1891FF;
      background: rgba(24, 145, 255, 0.1);
      text-align: center;

      border-radius: 20px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #1891FF;
      line-height: 40px;
    }

    :deep(.el-timeline-item__content) {
      display: grid;
      grid-template-columns: 694px 694px;
      align-items: center;
      justify-content: space-between;

      .time {
        margin-top: 30px;
      }

      .timeItem {


        .title {
          margin: 15px 0;
        }

        .img:hover {
          background: rgba(0, 0, 0, 0.4);
          width: 100%;
          // background: #000000;
          // opacity: 0.7;
          border-radius: 20px;
          z-index: 99;

          .detailedText {
            background: rgba(0, 0, 0, 0.4);
            opacity: 1;

          }
        }

        .img {
          position: relative;
          width: 694px;
          height: 400px;

          border-radius: 20px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          img {
            width: 100%;
            height: 100%;
          }

          .detailedText {
            position: absolute;
            width: 83%;
            height: 100%;
            opacity: 0;
            padding: 0 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .title {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #FFFFFF;

            }

            .context {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;

            }

            .button {
              display: flex;
              justify-content: flex-end;
              margin-top: 48px;
            }
          }
        }
      }
    }


  }
}
</style>
